{% spaceless %}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Effective Health Calculator - Ragnarok 2 Simulator</title>
        <link href="{{ asset('css/bootstrap.min.css') }}" type="text/css" rel="stylesheet" />
        <link href="{{ asset('css/main.css') }}" type="text/css" rel="stylesheet" />
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>
    	<div class="background"></div>
    	<header class="row-fluid">
    		<div class="logo span6 offset3"></div>
    	</header>
    	<div class="row-fluid">
    		<div class="span6 offset3">
    			<ul class="builds-list nav nav-tabs">
				  <li class="active">
				    <a href="#">Heroic Set</a>
				  </li>
				  <li><a href="#">Baphomet Set</a></li>
				  <li><a href="#"><i class="icon-plus icon-white"></i></a>
				</ul>
    		</div>
    	</div>
    	
    	<div class="row-fluid">
    		
    		<div class="well span6 offset3" style="position: relative;">
    		<div class="left-nav">
    			<ul>
    				<li><i class="icon-exclamation-sign icon-white"></i></li>
    				<li><i class="icon-question-sign icon-white"></i></li>
    			</ul>
    		</div>
    			<div class="row-fluid">
    			
    				<div class="span8 offset2">
    					<div class="class-select row-fluid">
    						<div class="span3"><img src="{{ asset('img/knight.png') }}" /></div>
    						<div class="span3 active"><img src="{{ asset('img/knight.png') }}" /></div>
    						<div class="span3"><img src="{{ asset('img/knight.png') }}" /></div>
    						<div class="span3"><img src="{{ asset('img/knight.png') }}" /></div>
    					</div>
		    			<form class="form-horizontal">
		    				<fieldset>
		    					<legend>Base Stats</legend>
								  <div class="control-group">
								    <label class="control-label" for="inputHP">HP</label>
								    <div class="controls">
								      <input type="text" id="inputHP" placeholder="Health Point">
								    </div>
								  </div>
								  <div class="control-group">
								    <label class="control-label" for="inputDefenseRate">Defense Rate</label>
								    <div class="controls">
								      <input type="text" id="inputDefenseRate" placeholder="Defense Rate">
								    </div>
								  </div>
								  <div class="control-group">
								    <label class="control-label" for="inputDodgeRate">Dodge Rate</label>
								    <div class="controls">
								      <input type="text" id="inputDodgeRate" placeholder="Dodge Rate">
								    </div>
								  </div>
								  <div class="control-group">
								    <label class="control-label" for="inputParryRate">Parry Rate</label>
								    <div class="controls">
								      <input type="text" id="inputParryRate" placeholder="Parry Rate">
								  </div>
								</div>
						  	</fieldset>
						  	<fieldset>
		    					<legend>Self Buffs</legend>
								<div class="control-group">
								    <label class="control-label" for="inputAuraArmor">Aura Armor</label>
								    <div class="controls">
								      <select id="inputAuraArmor">
										  <option value="0">0</option>
										  <option value="1">1</option>
										  <option value="2">2</option>
										  <option value="3">3</option>
										  <option value="4">4</option>
										  <option value="5">5</option>
										</select>
								    </div>
								</div>
								<div class="control-group">
								    <label class="control-label" for="inputConcentration">Concentration</label>
								    <div class="controls">
								      <select id="inputConcentration">
										  <option value="0">0</option>
										  <option value="1">1</option>
										  <option value="2">2</option>
										  <option value="3">3</option>
										  <option value="4">4</option>
										  <option value="5">5</option>
										</select>
								    </div>
								</div>
								<div class="control-group">
								    <label class="control-label" for="inputAuraShield">Aura Shield</label>
								    <div class="controls">
								      <select id="inputAuraShield">
										  <option value="0">0</option>
										  <option value="1">1</option>
										  <option value="2">2</option>
										  <option value="3">3</option>
										  <option value="4">4</option>
										  <option value="5">5</option>
										</select>
								    </div>
								</div>
								<div class="control-group">
								    <label class="control-label" for="inputShieldFortress">Shield Fortress</label>
								    <div class="controls">
								      <select id="inputShieldFortress">
										  <option value="0">0</option>
										  <option value="1">1</option>
										  <option value="2">2</option>
										  <option value="3">3</option>
										  <option value="4">4</option>
										  <option value="5">5</option>
										</select>
								    </div>
								</div>
						  	</fieldset>
						  	<fieldset>
		    					<legend>Group Buffs</legend>
								  <div class="control-group">
								    <label class="control-label" for="inputBenediction">Benediction</label>
								    <div class="controls">
								      <select id="inputBenediction">
										  <option value="0">0</option>
										  <option value="1">1</option>
										  <option value="2">2</option>
										  <option value="3">3</option>
										  <option value="4">4</option>
										  <option value="5">5</option>
										</select>
								    </div>
								</div>
						  	</fieldset>
						</form>
						<h2>Results</h2>
						<table class="table">
							<thead>
								<tr>
									<th></th>
									<th>Base</th>
									<th>Self Buffed</th>
									<th>Group Buffed</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>Effective Health</td>
									<td id="baseEH">0</td>
									<td id="selfBuffedEH">0</td>
									<td id="groupBuffedEH">0</td>
								</tr>
								<tr>
									<td>EH with D & P</td>
									<td>0</td>
									<td>0</td>
									<td>0</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
    		</div>
    	</div>
        <script src="{{ asset('js/jquery.min.js') }}" type="text/javascript"></script>
    	<script src="{{ asset('js/bootstrap.min.js') }}" type="text/javascript"></script>
    	<script src="{{ asset('js/Event.js') }}" type="text/javascript"></script>
    	<script src="{{ asset('js/Engine.js') }}" type="text/javascript"></script>
    	<script src="{{ asset('js/BuffEffect.js') }}" type="text/javascript"></script>
    	<script src="{{ asset('js/Buff.js') }}" type="text/javascript"></script>
    	<script src="{{ asset('js/BuffCollection.js') }}" type="text/javascript"></script>
    	<script src="{{ asset('js/Class.js') }}" type="text/javascript"></script>
    	<script src="{{ asset('js/Knight.js') }}" type="text/javascript"></script>
    	<script src="{{ asset('js/Build.js') }}" type="text/javascript"></script>
    	<script src="{{ asset('js/Main.js') }}" type="text/javascript"></script>
    </body>
</html>
{% endspaceless %}